<template>
  <div class="admin-login_item9">
    <div class="tiem9-title">
      <div class="title-headline">登录</div>
      <div class="title-subhead">欢迎登录阿拉博数后台服务系统</div>
      <div class="title-name">用户名</div>
      <input class="title-boxku" v-model="user.username" placeholder="请输入您的账号" />
      <div class="title-name">密码</div>
      <input class="title-boxku" v-model="user.password" type="password" placeholder="请输入您的密码" />
      <div class="title-swit">
        <el-checkbox class="title-check" v-model="checked">我已阅读《阿拉博数企业服务条款》</el-checkbox>
      </div>
      <div class="item9-subb-buton">
        <el-button class="buton-action" @click="submit" :loading="loading">登录</el-button>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
     data() {
       return {
         loading: false,
         checked: false,
         user: {
         	username: '',
         	password: ''
         }
       }
     },
     mounted() {
     	this.init()
     },
     methods: {
       async submit() {
         if (this.checked) {
           this.loading = true
           await this.$ala.userLogin(this.user)
           this.loading = false
           await this.$emit('afterLogin')
         } else {
           this.$alert('请勾选服务条款', '提示！', {
             confirmButtonText: '确定'
           })
         }
       }
     }
   }
</script>

<style lang="scss">
  .admin-login_item9{
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1200px;
    display: flex;
    flex-direction: row;
    background: url("https://diyapi.5ug.com/wwwroot/uploads/api/256-116-382/2022-02-17/620de4a5051295f55528993f.png");
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    .tiem9-title{
      top: 25%;
      left: 62%;
      min-width: 0;
      position: absolute;
    }
    .title-headline{
      padding: 10px 0;
      font-size: 28px;
      font-weight: bold;
    }
    .title-subhead{
      font-size: 15px;
      color: #C3C3C3;
    }
    .title-name{
      margin-top: 20px;
      padding: 10px 0;
      font-size: 15px;
    }
    .title-boxku{
      border-radius: 5px;
      width: 300px;
      border: 2px solid #3258DD;
      font-size: 14px;
      padding: 8px 10px;
      //line-height: 35px;
    }
    .title-swit{
      padding: 10px 0;
    }
    .title-check{
      font-size: 10px;
      color: #8C8C8C;
    }
    .item9-subb-buton{
      font-size: 20px;
      width: 300px;
      margin-top: 20px;
      .buton-action {
        font-size: 20px;
        background:linear-gradient(left, #43A0DF,#3258DD);
        color: #ffffff;
        width: 300px;
        padding: 12px 0px;
        border-radius: 5px;
      }
    }
    .item9-subb-buton span {
        font-size: 16px;
        letter-spacing:6px
      }
  }
</style>
